import React from 'react';
import {
    View,
    Image,
    FlatList,
    StyleSheet
} from 'react-native';
import {SafeAreaView} from 'react-navigation';
import {connect} from 'react-redux';
import actions from '../../action';
import {screen} from '../../public/common';
import LoanListItem from '../../components/LoanListItem';
import BackPressComponent from '../../components/BackPressComponent';
import NavigationUtil from '../../navigator/NavigationUtil';
class LoanTypePage extends React.Component {
    constructor(props){
        super(props);
        this.backPress = new BackPressComponent({backPress: () => this.onBackPress()});
        this.storeName = `HomeloanDatas${this.props.loantype.type}`;//确保storeName的名字唯一
        this.state = {
            imgUrl:require('../../images/home/less_loan.jpg')
        }
    }
    onBackPress() {
        NavigationUtil.goBack(this.props.navigation);
        return true;
    }
    componentWillMount(){
        this.backPress.componentDidMount();
        const {navigation,loantype} = this.props;
        navigation.setParams({title:loantype.name}) //设置title;
        let params = { //异步获取数据
            loantype:loantype.type,
            ref_customer_id:2
        }
        if(loantype.type == 'largeloan'){
            this.setState({
                imgUrl:require('../../images/home/large_loan.jpg')
            })
        }
        // console.log(params);
        this.props.getLoanData(this.storeName,params)
    } 
    componentWillUnmount() {
        this.backPress.componentWillUnmount();
    }
    /**
     * 获取与当前页面有关的数据
     * @returns {*}
     * @private
     */
    _store() {
        const {loanDataList} = this.props;
        let store = loanDataList[this.storeName];
        if (!store) {
            store = {
                isLoading: false,
                projectModels: [],//要显示的数据
            }
        }
        return store;
    }
    render() {
        let store = this._store();
        return (
            <SafeAreaView style={styles.container}>
                <FlatList
                    data={store.projectModels}
                    renderItem={(info,i)=>{
                        return (
                            <LoanListItem infoData={info} key={i}/>
                        )
                    }}
                    keyExtractor={(item, index) => {
                        return index.toString()
                    }}
                    ListHeaderComponent={()=>(
                        <View style={styles.imgView}>
                            <Image style={styles.topImg} 
                            source={this.state.imgUrl}
                            resizeMode={"contain"}/>
                        </View>
                    )}
                />
            </SafeAreaView>)
    }
}

const mapStateToProps = state =>({
    nav:state.nav,
    loantype:state.loantype,
    loanDataList:state.loanDataList
});
const mapDispatchToProps = dispatch => ({
    getLoanData:(storeName,data)=>dispatch(actions.getLoanData(storeName,data))
})
export default connect(mapStateToProps,mapDispatchToProps)(LoanTypePage);


const styles = StyleSheet.create({
    container:{
        flex: 1, 
        backgroundColor: "#fff",
    },
    imgView:{
        marginTop:10,
        marginBottom: 10,
    },
    topImg:{
        width:screen.width-20,
        height:120,
        marginLeft: 10,
    },
});